/** * Create by mzq * Description: 每日健康特征柱状图 * Date: 2024/9/14 16:48 * Update: 2024/9/14
16:48 */
<template>
  <div id="RightDailyHealthCharacteristicsBar"></div>
</template>
<script setup>
import * as echarts from 'echarts'
import { onMounted, ref, watch } from 'vue'
import { getImageUrl } from '@/utils/index.js'

let count = ref(0)

let data = ref([])

const props = defineProps({
  data: Object
})

const newData = ref([])

const Icons = {
  man: getImageUrl('man.png'),
  woman: getImageUrl('woman.png')
}

const init = () => {
  let myChart = echarts.init(document.getElementById('RightDailyHealthCharacteristicsBar'))
  let option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        // Use axis to trigger tooltip
        type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
      }
    },
    grid: {
      left: '15%',
      right: '0',
      bottom: '0',
      top: '15%',
      containLabel: true
    },
    xAxis: {
      type: 'value',
      show: false,
      axisLabel: {
        show: false
      }
    },
    yAxis: {
      type: 'category',
      data: ['男', '女'],
      axisTick: {
        show: false
      },
      axisLabel: {
        textStyle: {
          color: '#fff'
        },
        formatter: function (value, index) {
          if (index < 2) {
            return `{img${index}|} {a|${value}}`
          } else {
            return `{b|${index + 1}}{a|${value}}`
          }
        },
        rich: {
          value: {
            lineHeight: 30,
            align: 'center'
          },
          img0: {
            height: 40,
            align: 'center',
            backgroundColor: {
              image: Icons.man
            }
          },
          img1: {
            height: 40,
            align: 'center',
            backgroundColor: {
              image: Icons.woman
            }
          }
        }
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.60)'
        }
      }
    },
    series: [
      {
        name: '',
        type: 'bar',
        label: {
          show: true,
          formatter: (params) => {
            console.log("右侧right", params)
            const percentage = Math.round((params.value / params.data.total) * 100)
            console.log("percentage", percentage)
            if (isNaN(percentage)){
              return ""
            }else{
              if (percentage === 0){
                return ''
              }else{
                return `${percentage}%`
              }
            }
          }
        },
        emphasis: {
          focus: 'series'
        },
        data: newData.value.map((item) => ({
          value: item.value,
          total: item.total
        })),
        itemStyle: {
          color: function (params) {
            let colorList = ['#015EEA', '#F090F4']
            return colorList[params.dataIndex]
          }
        }
      }
    ]
  }
  myChart.setOption(option, true)

  window.addEventListener('resize', function () {
    myChart.resize()
  })
}

watch(
  () => props.data,
  (val) => {
    data.value = [
      val.historyMonitorCnt.todayDeepMonitor.manCount,
      val.historyMonitorCnt.todayDeepMonitor.womanCount
    ]

    for (let i = 0; i < data.value.length; i++) {
      count.value += data.value[i]
    }

    for (let i = 0; i < data.value.length; i++) {
      newData.value.push({
        value: data.value[i],
        total: count.value
      })
    }

    init()
  }
)
</script>
<style scoped lang="scss">
#RightDailyHealthCharacteristicsBar {
  width: 1.078125rem /* 207/192 */;
  height: 0.5208rem /* 100/192 */;
}
</style>
